<template>
  <div class="upload-page">
    <h2 style="text-align: center">上传电影</h2>

    <el-form :model="movie" label-width="auto" style="max-width: 600px">
      <el-form-item label="电影名">
        <el-input v-model="movie.name" />
      </el-form-item>
      <el-form-item label="电影封面">
        <input name="img_path" type="file" @change="handleFileChange" />
        <img v-if="img_url" :src="img_url" style="max-width: 300px;height: 200px" alt="封面图片"/>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="movie.type" placeholder="Select" style="width: 240px">
          <el-option
            v-for="item in typeList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出版时间">
        <el-date-picker
          v-model="movie.date"
          type="date"
          placeholder="Pick a day"
          size="default"
        />
      </el-form-item>
      <el-form-item label="出版地区">
        <el-input v-model="movie.nation" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="movie.description" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button style="width: auto;margin-left: 45%" type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { reactive } from 'vue';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import request from "@/axios/request.js";

let movie = reactive({ name: '', type: '', description: '', nation: '', date: '', img: null });
let typeList = ref([
  "动作",
  "喜剧",
  "爱情",
  "科幻",
  "恐怖",
  "战争",
  "犯罪",
  "奇幻",
  "冒险",
  "悬疑",
  "动画"
]);

let img_url = ref('')

const handleFileChange = (event) => {
  const file = event.target.files[0];
  console.log(file);
  if (file) {
    movie.img = file;
    console.log(movie.img);
    img_url.value = URL.createObjectURL(file);
  }
};

const onSubmit = () => {
  console.log(movie);
  const formData = new FormData();
  formData.append('name', movie.name);
  formData.append('type', movie.type);
  formData.append('description', movie.description);
  formData.append('nation', movie.nation);
  // 将data转成 2024-10-11 00:00:00 格式字符串
  let movie_date = new Date(movie.date);
  let formattedDate = movie_date.toISOString().slice(0, 19).replace('T', ' ');
  formData.append('date', formattedDate);
  formData.append('img', movie.img);

  request.post('/movie', formData,{
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((res) => {
    if(res.code === 200) {
      ElMessage.success('上传成功');
    } else {
      ElMessage.error(res.msg);
    }
  });
};


</script>

<style scoped>
.upload-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #222;
  color: white;
}

form {
  background: #333;
  margin: 0 30%;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid red;
}

.form-group {
  margin-bottom: 15px;
  margin-right: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #555;
  background: #444;
  color: white;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background: #555;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #666;
}
</style>
